<template>
    <div class="wrapper">
        <div class="title">付款人信息</div>
        <div class="info">
            <van-cell-group inset>
                <van-field v-model="payName" label-width="6em" label="打款人姓名" placeholder="请输入打款人姓名" />
                <van-field v-model="payBankNo" label-width="6em" label="打款人卡号" placeholder="请输入打款人银行卡号" />
            </van-cell-group>
        </div>
        <div class="title">上传支付凭证</div>
        <div class="upload">
            <van-uploader :after-read="afterRead">
                <img v-show="!img" src="@/assets/index/zfpz.png" alt="" />
                <img v-show="img" :src="img" alt="" />
            </van-uploader>
        </div>
        <div class="price">
            <div class="left">订单应付金额：</div>
            <div class="right">￥ {{ priceAll }}</div>
        </div>
        <div class="btn" @click="uploadInfoClick">提 交</div>
    </div>
</template>

<script>
import store from '@/store'
import { showToast } from 'vant'
import { commUploadImg, saveBill } from '@/api/orderPos'
export default defineComponent({
    name: 'uploadInfo',
    setup() {
        const router = useRouter()
        const route = useRoute()
        const state = reactive({
            payName: '',
            priceAll: 0,
            uploadInfo: {},
            img: '',
            img2: '',
            fileList: [],
            payBankNo: ''
        })

        state.priceAll = store.state.posOrder.UPLOADINFO.priceAll
        state.uploadInfo = store.state.posOrder.UPLOADINFO
        const afterRead = file => {
            commUploadImg({
                file: file.content,
                path: '/terminal/terminal_sale/'
            }).then(res => {
                state.img = file.content
                state.img2 = res.object
            })
        }
        const uploadInfoClick = () => {
            if (!state.payName) {
                showToast('请输入打款人姓名')
                return
            }
            if (!state.payBankNo) {
                showToast('请输入打款人银行卡账号')
                return
            }
            if (!state.img) {
                showToast('请上传打款打款凭证')
                return
            }

            Object.assign(state.uploadInfo.salesPaymentBillBean, {
                payer: state.payName,
                payerEvidencePath: state.img2,
                payBankNo: state.payBankNo
            })
            saveBill(state.uploadInfo).then(res => {
                router.push('/payWait')
            })
        }
        return {
            ...toRefs(state),
            afterRead,
            uploadInfoClick
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    padding: 10px;
    .title {
        font-size: 16px;
        text-align: center;
    }
    .info {
        background: #ffffff;
        opacity: 1;
        margin: 10px 0;
        border-radius: 6px;
    }
    .upload {
        padding: 20px;
        box-sizing: border-box;
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        margin-top: 10px;
        text-align: center;
        img {
            height: 100px;
        }
    }
    .price {
        padding: 20px;
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        margin-top: 10px;
        align-items: center;
        justify-content: space-between;
        .right {
            color: #ff0000;
            font-weight: 600;
        }
    }
    .btn {
        width: 160px;
        height: 40px;
        background: #66d6ff;
        opacity: 1;
        display: flex;
        margin: 50px auto;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        border-radius: 6px;
    }
}
</style>
